<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>帖子详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
    <link rel="stylesheet" href="${request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${request.contextPath}/layFly/css/global.css">
</head>
<body>

<#--<div class="fly-header layui-bg-black">-->
<#--    <div class="layui-container">-->
<#--        <a class="fly-logo" href="/">-->
<#--            <img src="../../res/images/logo.png" alt="layui">-->
<#--        </a>-->
<#--        <ul class="layui-nav fly-nav layui-hide-xs">-->
<#--            <li class="layui-nav-item layui-this">-->
<#--                <a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>-->
<#--            </li>-->
<#--            <li class="layui-nav-item">-->
<#--                <a href="../case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>-->
<#--            </li>-->
<#--            <li class="layui-nav-item">-->
<#--                <a href="http://www.layui.com/" target="_blank"><i class="iconfont icon-ui"></i>框架</a>-->
<#--            </li>-->
<#--        </ul>-->

<#--        <ul class="layui-nav fly-nav-user">-->

<#--            <!-- 未登入的状态 &ndash;&gt;-->
<#--            <!---->
<#--            <li class="layui-nav-item">-->
<#--              <a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html"></a>-->
<#--            </li>-->
<#--            <li class="layui-nav-item">-->
<#--              <a href="user/login.html">登入</a>-->
<#--            </li>-->
<#--            <li class="layui-nav-item">-->
<#--              <a href="user/reg.html">注册</a>-->
<#--            </li>-->
<#--            <li class="layui-nav-item layui-hide-xs">-->
<#--              <a href="/app/qq/" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入" class="iconfont icon-qq"></a>-->
<#--            </li>-->
<#--            <li class="layui-nav-item layui-hide-xs">-->
<#--              <a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" title="微博登入" class="iconfont icon-weibo"></a>-->
<#--            </li>-->
<#--             &ndash;&gt;-->

<#--            <!-- 登入后的状态 &ndash;&gt;-->
<#--            <li class="layui-nav-item">-->
<#--                <a class="fly-nav-avatar" href="javascript:;">-->
<#--                    <cite class="layui-hide-xs">贤心</cite>-->
<#--                    <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>-->
<#--                    <i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>-->
<#--                    <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">-->
<#--                </a>-->
<#--                <dl class="layui-nav-child">-->
<#--                    <dd><a href="../user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>-->
<#--                    <dd><a href="../user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>-->
<#--                    <dd><a href="../user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>-->
<#--                    <hr style="margin: 5px 0;">-->
<#--                    <dd><a href="" style="text-align: center;">退出</a></dd>-->
<#--                </dl>-->
<#--            </li>-->
<#--        </ul>-->
<#--    </div>-->
<#--</div>-->

<#--<div class="layui-hide-xs">-->
<#--    <div class="fly-panel fly-column">-->
<#--        <div class="layui-container">-->
<#--            <ul class="layui-clear">-->
<#--                <li class="layui-hide-xs"><a href="/">首页</a></li>-->
<#--                <li class="layui-this"><a href="">提问</a></li>-->
<#--                <li><a href="">分享<span class="layui-badge-dot"></span></a></li>-->
<#--                <li><a href="">讨论</a></li>-->
<#--                <li><a href="">建议</a></li>-->
<#--                <li><a href="">公告</a></li>-->
<#--                <li><a href="">动态</a></li>-->
<#--                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>-->

<#--                <!-- 用户登入后显示 &ndash;&gt;-->
<#--                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="../user/index.html">我发表的贴</a></li>-->
<#--                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="../user/index.html#collection">我收藏的贴</a></li>-->
<#--            </ul>-->

<#--            <div class="fly-column-right layui-hide-xs">-->
<#--                <span class="fly-search"><i class="layui-icon"></i></span>-->
<#--                <a href="add.html" class="layui-btn">发表新帖</a>-->
<#--            </div>-->
<#--            <div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;">-->
<#--                <a href="add.html" class="layui-btn">发表新帖</a>-->
<#--            </div>-->
<#--        </div>-->
<#--    </div>-->
<#--</div>-->

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 content detail">
            <div class="fly-panel detail-box" style="width: 80%;margin: 0 auto">
                <h1>${(item.title)!}</h1>
                <div class="detail-about" style="padding-left:5px ">
                    <div class="fly-detail-user">
                        <a href="javascript:void(0)" class="fly-link">
                            <cite>${(item.name)!}</cite>
                        </a>
                        <span>${(item.createtime)!}</span>
                    </div>
                </div>
                <div class="detail-body">

                    <audio controls style="margin: 0 auto;display: block;">
                        <source id="source" src='${request.contextPath}/${(item.url)!}'/>
                    </audio>
                <div>
                    ${(item.content)!}
                </div>
                </div>
            </div>

            <div class="fly-panel detail-box" id="flyReply" style="width: 80%;margin: 0 auto;margin-top: 10px">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>回帖</legend>
                </fieldset>
                <ul class="jieda" id="list">

                </ul>
                <div class="layui-form layui-form-pane">
                    <form action="" method="post">
                        <div class="layui-form-item layui-form-text">
                            <a name="comment"></a>
                            <div class="layui-input-block">
                                <textarea id="L_content" name="content" required lay-verify="required" placeholder="请输入内容"  class="layui-textarea fly-editor" style="height: 150px;"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" lay-filter="reply" lay-submit>提交回复</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="${request.contextPath}/layuiadmin/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'form'], function(){
        var $=layui.$
        var form=layui.form

        //获取帖子列表
        $.ajax({
            type:"post",
            url: "${request.contextPath}/comment/getByForumId?id=${(item.id)!}",
            //这里没有用json传值，所以contentType
            contentType:'application/json; charset=UTF-8',
            success: function(res) {
                console.log('res',res)
                var data=res.data;
                var html=''
                for (var i = 0; i <data.length ; i++) {
                    var item=data[i];
                    html=html+'<li data-id="111" class="jieda-daan" >' +
                                    '<div class="detail-about detail-about-reply"> ' +
                                        '<div class="fly-detail-user">' +
                                            '<a href="" class="fly-link">' +
                                                '<cite>'+item.name+'</cite>' +
                                            '</a>' +
                                        '</div>' +
                                    '<div class="detail-hits">' +
                                        '<span>'+item.createtime+'</span>' +
                                    '</div>' +
                                    '<div class="detail-body jieda-body photos">' +
                                         '<p style="margin-left: 50px">'+item.content+'</p>' +
                                    '</div>' +
                                '</li>'
                }
                $("#list").html(html)
                form.render()
            },
            error: function(res) {
                layer.alert(res.msg,{icon:2})
            }
        })


        form.on('submit(reply)', function(data){
            console.log(data.field);
            data.field.id='';
            data.field.forumId='${(item.id)!}'
            $.ajax({
                type:"post",
                url: "${request.contextPath}/comment/saveItem",
                contentType:'application/json; charset=UTF-8',
                data: JSON.stringify(data.field),
                // data: {customer:data.field},
                // data:data.field,
                success: function(res) {
                    console.log("=====success=====")
                    console.log(res)
                    if(res.code===200){
                        layer.alert(res.msg,{icon:1},function () {
                            //保存后刷新页面。
                            window.location.reload()
                        })
                    }
                },
                error: function(res) {
                    layer.alert(res.msg,{icon:2})
                }
            })
            return false;
        });

    });
</script>

</body>
</html>